<!--
 * @Descripttion: 小型商品下拉框选择
 * @version:
 * @Author: cxguo
 * @Date: 2020-03-10 20:49:27
 * @LastEditors: cxguo
 * @LastEditTime: 2020-11-12 15:06:37
 -->
<template>
  <div>
    <vxe-pulldown ref="xDown4" transfer>
      <template v-slot>
        <el-input
          v-model="insideValue"
          @input.native="onInput"
          @focus="onFocus"
          @keydown.native="onKeydown"
        >
          <el-button slot="suffix" type="text" @click="btnSelect">选择</el-button>
        </el-input>
      </template>
      <template v-slot:dropdown>
        <div class="my-dropdown4">
          <Select
            ref="selectTable"
            :query-data="queryData"
            :post-method="postMethod"
            :columns-data="tableColumns"
            @cell-click="onCellClick"
          />
        </div>
      </template>
    </vxe-pulldown>
  </div>
</template>
<script>
import { listDataMore, selectContainerStockByStore } from '@/api/goods/goods-sku.js'
import Select from './select.vue'
import cols from './select-cols.js'

export default {
  components: { Select },
  mixins: [cols],
  props: {
    value: {
      type: String,
      default: ''
    },
    formatColumnsData: {
      type: Function,
      default: (d) => { return d }
    }
  },
  data() {
    return {
      insideValue: '',
      iframe: null,
      searchData: {},
      tableData: []
    }
  },
  computed: {
    postMethod: function() {
      const postMethod = listDataMore
      return postMethod
    },
    queryData: function() {
      return this.getSearchData()
    },
    tableColumns: function() {
      return this.getColumnsData()
    }
  },
  watch: {
  },
  mounted() {
  },
  created() {
    this.insideValue = this.value
  },
  methods: {
    // 对外API
    setFocus() {
      this.$refs.input.focus()
    },
    //
    btnSelect() {
    },
    closeSelect() {
      this.$refs.xDown4.togglePanel()
    },
    handleSelectSure(row) {
      const { id, name } = row
      row.skuId = id
      this.$delete(row, 'id')
      this.insideValue = name
      this.$emit('on-select-data', row)
      this.closeSelect()
    },
    // get
    getColumnsData() {
      const columnsData = this.columnsData
      return this.formatColumnsData(columnsData)
    },
    getSearchData() {
      const keywords = this.insideValue
      return { keywords }
    },
    // on
    onInput(e) {
      const value = e.target.value
      this.$refs.xDown4.showPanel()
      const queryData = { keywords: value }
      this.$refs.selectTable.searchGoods(queryData)
    },
    onFocus(params) {
      this.$refs.xDown4.showPanel()
    },
    onCellClick(params) {
      const { row } = params
      this.handleSelectSure(row)
    },
    onKeydown(e) {
      const { keyCode } = e
      const tableVm = this.$refs.selectTable.$refs.table
      const currentRow = tableVm.getCurrentRecord()
      const tableData = tableVm.getTableData().tableData
      if (currentRow) {
        const currentIndex = tableVm.getRowIndex(currentRow)
        let index = 0
        if (keyCode === 38) index = currentIndex - 1
        if (keyCode === 40) index = currentIndex + 1
        const data = tableData[index]
        tableVm.setCurrentRow(data)
      } else {
        const data = tableData[0]
        tableVm.setCurrentRow(data)
      }
      if (keyCode === 13 && currentRow) {
        this.handleSelectSure(currentRow)
      }
    }
  }
}
</script>

<style scoped>

</style>
